<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        html {
            width: 3000px;
            height: 5000px;
        }

        .back {
            position: fixed;
            right: 5px;
            bottom: 5px;
        }
    </style>
</head>

<body>
    <button class="back">back</button>
</body>
<script>
    // 窗口的可视宽高  (包含滚动条 不包含控制台)  只能取值,不能赋值
    console.log("窗口的可视宽高", window.innerWidth, window.innerHeight);


    // 文档的可视宽高  (不包含滚动条 不包含控制台  => 一屏宽高)  只能取值,不能赋值
    // document.documentElement.clientWidth    document.documentElement.clientHeight
    // 取的是 html元素的  clientWidth /clientHeight

    console.log("文档的可视宽高", document.documentElement.clientWidth, document.documentElement.clientHeight);



    // 文档的实际宽高 (页面在文档中实际占据的位置) 只能取值,不能赋值
    // document.documentElement.scrollWidth    document.documentElement.scrollHeight
    // 取的是 html元素的  scrollWidth /scrollHeight
    console.log("文档的实际宽高", document.documentElement.scrollWidth, document.documentElement.scrollHeight);


    // 滚动条的位置   (获取和设置)  => 滚动条相对于文档左边/顶部的距离 
    // document.documentElement.scrollLeft    document.documentElement.scrollTop

    window.onscroll = function () { // 监听滚动的位置 => 页面上升的距离
        console.log("滚动条的位置", document.documentElement.scrollLeft, document.documentElement.scrollTop);
    }

    var back = document.getElementsByClassName("back")[0];
    var timer = null;

    back.onclick = function () {
        // document.documentElement.scrollLeft = 0;
        // document.documentElement.scrollTop = 0;
        clearInterval(timer);
        timer = setInterval(function () {
            document.documentElement.scrollLeft -= 100;
            document.documentElement.scrollTop -= 100;
            if (document.documentElement.scrollLeft == 0 && document.documentElement.scrollTop == 0) {
                clearInterval(timer);
            }
        }, 10)

    }

</script>

</html>